<!-- 表格中的文本显示组件：文本、数字、时间等非编辑状态下为文本的单元格，都可使用该组件渲染样式 -->
<template>
  <div
    class="table-cell"
    :title="columnConfig.ellipsis && hasNativeTitle ? text : ''"
    :style="cellStyle"
  >
    <!-- icon -->
    <img v-if="iconType === 'CUSTOM'" :src="icon" alt="" />
    <component v-else-if="iconType === 'DEFAULT'" :is="icon" />

    <!-- 文字 -->
    {{ getCheckName() }}
  </div>
</template>

<script>
  import { computed, defineComponent } from 'vue';

  export default defineComponent({
    name: 'TextDisplayCell',
    props: {
      text: {
        type: [String, Number, Boolean, Array],
        default: () => {
          return '';
        },
      },
      color: {
        type: String,
        default: () => {
          return '';
        },
      },
      iconType: {
        type: String,
        default: () => {
          return '';
        },
      },
      icon: {
        type: String,
        default: () => {
          return '';
        },
      },
      columnConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      hasNativeTitle: {
        type: Boolean,
        default: true,
      },
    },
    setup(props) {
      // 单元格的样式
      const cellStyle = computed(() => {
        const { align, ellipsis } = props.columnConfig;

        const styleObject = {};

        if (props.color) {
          styleObject['color'] = props.color;
        }

        if (align) {
          styleObject['text-align'] = align;
        }

        if (ellipsis) {
          styleObject['overflow'] = 'hidden';
          styleObject['text-overflow'] = 'ellipsis';
          if (
            props.columnConfig.hasOwnProperty('width') &&
            props.columnConfig.width !== null &&
            props.columnConfig.width !== undefined
          ) {
            styleObject['width'] = props.columnConfig.width + 'px';
          } else {
            styleObject['width'] = '100%';
          }
        }

        return styleObject;
      });
      const getCheckName = () => {
        let html = [];
        //自定义
        const { text, columnConfig } = props;
        if (text && Array.isArray(text)) {
          text.forEach((item) => {
            if (item !== null && item !== undefined) {
              if ('label' in item && 'value' in item) {
                html.push(item.label);
              }
            }
          });
        }
        // 针对列表静态数据映射处理
        if (columnConfig && columnConfig.contentType === 'OPTIONS') {
          const { dataSourceConfig}  = columnConfig.contentConfig || {};
          if (dataSourceConfig?.isStatic) {
            const {conversionConfig, staticDataSource} = dataSourceConfig;
            const key =  conversionConfig.value || 'value';
            const showKey = conversionConfig.label || 'label';
            const staticDataList = staticDataSource.filter(item =>{
             return item[key] === text
            }).map(item => item[showKey]);
            html.push(...staticDataList)
          }
        }
        if (html.length > 0) {
          return html.join(',');
        }
        return text;
      };
      return {
        cellStyle,
        getCheckName,
      };
    },
  });
</script>

<style scoped>
  .table-cell {
    display: block;
    width: 100%;
  }
</style>
